<template>
  <g>
    <g v-for="(item, index) in group" :key="item.id" :transform="`translate(${item.x},${item.y})`">
      <line stroke="#000000" class="line" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2" :id="item.id" fill-opacity="0.5"
        stroke-opacity="1" :transform="`rotate(${item.rotate})`" @click="chousLine"></line>
    </g>
    <box :activeItem="activeItem.arr" :transform="`translate(${activeItem.trs.x},${activeItem.trs.y})`" @boxstart="boxstart" @boxmove="boxmove" @boxend="boxend"></box>
  </g>
</template>
<script setup>
import box from './box.vue'
import { ref, reactive, computed } from 'vue';
const props = defineProps({
  group: Array,
  scale: Number
})

// 计算’两端‘坐标
const activeItem = computed(() => {
  // 删选选中的线条
  let l = props.group.filter(e => e.checked)[0]
  if (l) {
    return {
      arr: [
        {
          x: l.x1,
          y: l.y1,
          id: 'l'
        },
        {
          x: l.x2,
          y: l.y2,
          id: 'r'
        }
      ],
      trs: {
        x: l.x,
        y: l.y
      }
    }
  }else{
    return {
      arr: [],
      trs: {
        x: 0,
        y: 0
      }
    }
  }
})
//
const chousLine = function (e) {
  e.stopPropagation()
}
let startEdi = {}
// cart - div
let cartEdit = {}
const boxstart = function (e) {
  // 画布容器
  let el = document.getElementsByClassName('cart')[0]
  cartEdit.x = el.scrollLeft
  cartEdit.y = el.scrollTop
  //
  let l = props.group.filter(e => e.checked)
  //
  let touch = e.touches[0];
  startEdi = {
    x: touch.clientX,
    y: touch.clientY
  }
}

const boxmove = function (e) {
  let l = props.group.filter(e => e.checked)
  let touch = e.touches[0];
  //@ts-check
  let boxID = e.target.id
  if (l) {
    // right - box
    if (boxID === 'r') {
      l[0].x2 = touch.pageX - l[0].x + cartEdit.x
      l[0].y2 = touch.pageY  - 35 - l[0].y + cartEdit.y
    } else if (boxID === 'l') {
      l[0].x1 = touch.pageX - l[0].x + cartEdit.x
      l[0].y1 = touch.pageY - 35 - l[0].y + cartEdit.y
    }
  }
}

const boxend = function (e) {
  // console.log(e)
}
</script>
<style lang="scss" scoped>
.line {
  stroke-width: 5;
}
</style>